import React,{useState} from 'react'
import style from  './books.module.css'
import PilIst from '../PictureListening/PilIst'
import { Rate } from 'react-vant';

export default function Books_city() {
  const [value, setValue] = useState(3);
  let reai=[
    {
      Rimg:'https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      Rname:'夜莺与玫瑰'
    },
    {
      Rimg:'https://img1.baidu.com/it/u=3605832793,3252065221&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422',
      Rname:'电影的宿命'
    },
    {
      Rimg:'https://img2.baidu.com/it/u=3591363530,4004810453&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=313',
      Rname:'夜莺与玫瑰'
    },
    {
      Rimg:'https://img0.baidu.com/it/u=3421374377,4269003712&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      Rname:'赤壁之间'
    },
  ]
  let tuijian=[
    {
      Timg:'https://img0.baidu.com/it/u=2828177625,3820269106&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      Tname:'置身事内',
    },
    {
      Timg:'https://img1.baidu.com/it/u=2091640942,1648288978&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
      Tname:'也许你该找个人聊聊',
    },
    {
      Timg:'https://img1.baidu.com/it/u=204971088,1987351322&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      Tname:'从零开始的女性主义',
    },{
      Timg:'https://img0.baidu.com/it/u=3394901541,197950539&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
      Tname:'同名同女性受害者',
    },
    {
      Timg:'https://img0.baidu.com/it/u=3722509282,617565498&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
      Tname:'生死疲劳',
    },
    {
      Timg:'https://img2.baidu.com/it/u=3118895863,3327096771&fm=253&fmt=auto&app=138&f=JPEG?w=713&h=500',
      Tname:'浮木',
    },
  ]
  return (
    <div className={style['book']}>
      <div className={style['book-header']}>
        <div className={style['header-navigation']}>
            <span className={style['navigation-Tu']}>图书</span>
            <span className={style['navigation-Ting']}>听书</span>
            <span className={style['navigation-Dan']}>书单</span>
        </div>
        <div className={style['header-search']}><i className='iconfont icon-sousuo' /></div>
      </div>
      <div className={style['book-content']}>
        <div className={style['content-Lun']}>
          <PilIst />
        </div>
        <div className={style['bookslist']}>
          <div className={style['bookslist-Popular']}>
            <div className={style['Popular']}>
              <span className={style['Popular-re']}>热门好书</span>
              <span className={style['Popular-geng']}>更多<i className='iconfont icon-xiangyoujiantou' /></span>
            </div>
            <div className={style['introduce']}>
              <div className={style['introduce-img']}>
                
                <img src='https://img2.baidu.com/it/u=3853345508,384760633&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200' />
              </div>
              <div className={style['introduce-neirong']}>
                <p className={style['introduce-name']}>错乱爱情</p>
                <p className={style['introduce-pingjia']}>
                  <Rate color="orange" value={value} onChange={setValue} />
                  <span>10.0分</span>
                </p>
                <p className={style['introduce-wenx']}>
                  [日]吉竹伸介  | 文学/虚构
                </p>
                <p className={style['introduce-jianjie']}>墨西哥荒芜的烈日下，一维满身污点的神父逃亡在路上，秃鹰飞过。一路上沧海而逃</p>
              </div>
            </div>
            <div className={style['tuijianleisi']}>
              {
                reai.map((item,index)=>(
                 <div className={style['remenshu']} key={index}>
                     <div className={style['book-img']}>
                        <img src={item['Rimg']} />
                      </div>
                      <div>{item['Rname']}</div>
                 </div>
                ))
              }
            </div>
          </div>
          <hr style={{marginTop: '10px'}} />
          <div >
            <div className={style['VIPZT']}>
              <span className={style['VIPZT-mf']}>【VIP免费】本周推荐</span>
              <span className={style['VIPZT-geng']}>更多<i className='iconfont icon-xiangyoujiantou' /></span>
            </div>
            <div className={style['Zoutui']}>
              {
                tuijian.map((item,index)=>(
                  <div className={style['Zoutui-content']}>
                    <div className={style['Zoutui-img']}>
                      <img src={item['Timg']} />
                    </div>
                    <div className={style['Zoutui-name']}>
                      {item['Tname']} 
                    </div>
                </div>
                ))
              }
            </div>
          </div>
          <div className={style['gengduotuijian']}>
            <div className={style['gengduotuijian-T']}>
              <span className={style['gengduotuijian-J']}>更多推荐</span>
              <span className={style['gengduotuijian-GD']}>更多<i className='iconfont icon-xiangyoujiantou' /></span>
            </div>
            <div>
              <div className={style['gengduoTJ']}>
                  <div className={style['introduce-img']}>
                    <img src='https://img2.baidu.com/it/u=3853345508,384760633&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200' />
                  </div>
                  <div className={style['introduce-neirong']}>
                    <p className={style['introduce-name']}>错乱爱情</p>
                    <p className={style['introduce-pingjia']}>
                      <Rate color="orange" value={value} onChange={setValue} />
                      <span>10.0分</span>
                    </p>
                    <p className={style['introduce-wenx']}>
                      [日]吉竹伸介  | 文学/虚构
                    </p>
                    <p className={style['introduce-jianjie']}>墨西哥荒芜的烈日下，一维满身污点的神父逃亡在路上，秃鹰飞过。一路上沧海而逃</p>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
